<script setup lang="ts">
import GoodSearch from './components/goodSearch.vue';
import LayoutFooter from '../../Layout/components/LayoutFooter.vue';
import LayoutNav from '../../Layout/components/LayoutNav.vue';
import LayoutHeader from '../../Layout/components/LayoutHeader.vue';
import { ref,watch,onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router';

//获取分类列表
import { getCategory } from '@/api/good'
const categorylist = ref([])
const getCategoryList = async () => {
  const res = await getCategory()
  //console.log(res.rows)
  categorylist.value = res.rows
}
getCategoryList()

const router = useRouter();
const route = useRoute()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  categoryId: '',
  storeName:route.query.name || '',
})
onMounted(() => {
  console.log(route.query.name)
  getStoreList()
})
// 监听路由变化
watch(() => route.query.name, (newName) => {
  if (newName) {
    queryParams.value.goodName = newName
    // queryParams.value.pageNum = 1
    getStoreList()
  }
})


import { getStoreListAPI ,getStoreRankAPI } from '@/api/shop'
const storeList = ref([])
//获取商家列表
const getStoreList = async () => {
  // const res = await getStoreListAPI()
  // // console.log(res.data)
  // storeList.value = res.data.data
  const res = await getStoreListAPI(queryParams.value)
  console.log(res)
  storeList.value = res.row

}

const search = ref('')
//根据搜索框内容查询
const searchItems = async () => {
  // disabled.value = false
  // queryParams.value.pageNum = 1
  // queryParams.value.goodName = search.value;
  router.replace({
      name: 'storeSearch',
      query: {
        name: search.value
      }
  });
  await getStoreList()
}




</script>

<template>
  <layout-nav/>
  <!-- <LayoutHeader/> -->
    <div class="container">
    <header class='app-header'>
    <div class="container">
      <div class="logo">
        <RouterLink to="/">桃禧</RouterLink>
      </div>
      <div class="app-header-nav">
        <span>实体店搜索</span>
        <el-input v-model="search" placeholder="输入您想要的商品" size="big" clearable style="padding: 5px 30px ;"></el-input>
      </div>
      <div class="search">
        <el-button 
          type="primary" 
          size="big"
          @click="searchItems">
          搜索
          <i class="iconfont icon-search"></i>
        </el-button>
        <el-button 
          type="button" size="big" style="background-color: #e58686;color: #000; margin-left: 50px;"
          @click="router.push('/crowdFunding')">
          众筹浏览
        </el-button>
      </div>
    </div>
  </header>
  <hr>
  </div>
  <div class="container">
    <div class="search-box">
    <h1>搜索结果</h1>
      <p>若没有找到心仪的结果可以试试将您的需求写得更详细</p>
      <!-- <ul>
        <li>淘货类型</li>
        <li>青春流行(18-24岁)</li>
        <li>时尚都市(24-35岁)</li>
        <li>商务绅士(35岁以上)</li>
      </ul> -->
      <ul>
        <li>服装分类</li>
        <li v-for="category in categorylist" :key="category">{{ category.categoryName }}</li>
      </ul>
      <!-- <ul>
        <li>袖长</li>
        <li>短袖</li>
        <li>长袖</li>
        <li>无袖</li>
        <li>七分袖</li>
        <li>五分袖</li>
      </ul>
      <ul>
        <li>款式</li>
        <li>宽松型</li>
        <li>修身型</li>
        <li>紧身型</li>
        <li>直筒型</li>
      </ul> -->
    </div>
    <div class="home-store">
    <div class="storeList-box">
      <ul class="store-list">
        <li class="list-item" v-for="item in storeList" :key="item.id">
          <RouterLink :to="{name: 'store', params: {storeid: item.id}}" style="width: 100%;">
          <div class="main">
            <div class="store-name">
              <p>{{ item.name }}</p>
              <span class="location">{{ item.location }}</span>
            </div> 
            <div class="desc"><p>{{item.description }}</p></div>
            <div class="store-footer">
              <span>店铺销量<span style="margin-left: 5px;">{{ item.sales }}</span></span>
              <span style="margin-left: 10px;">综合评价
                <el-rate
                  v-model="item.rate"
                  disabled
                  show-score
                  text-color="#ff9900"
                  style="height: 20px;"
                />
              </span>
            </div>
            <ul class="imgList">
              <li v-for="(imgURL, index) in item.imgURLs" :key="index">
              <img :src="imgURL" alt="商品图片" />
              </li>
            </ul>
          </div>
          </RouterLink>
        </li>
        <li></li>
      </ul>
      </div>
    </div>
  </div>
  <LayoutFooter/>
</template>

<style scoped lang="scss">
  .app-header {
  background: #ffffff;
  height: 130px;

  .container {
    display: flex;
    // padding-left: 15%;
    align-items: center;
    justify-content: center;
  }

  .logo {
    width: 80px;

    a {
      display: block;
      height: 100px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }

  .app-header-nav {
    width: 600px;
    // display: flex;
    padding-left: 50px;
    position: relative;
    z-index: 998;
  
  }

  .search {
    width: 300px;
    height: 32px;
    // position: relative;
    margin-top: 55px;
    padding-left: 5px;
    line-height: 32px;

    .icon-search {
      font-size: 18px;
    }

    input {
        color: #000;
    }
  }

}


  .search-box{
    background: #fff;
    padding: 20px 0 0 20px;
    border-bottom: 1px solid #999;
    
    h1{
      padding: 10px;
      margin-left: 20px;
    }
    p{
      padding: 10px;
      margin-left: 20px;
    }
    ul{
      display: flex;
      flex-wrap: wrap;

    }
    li{
      padding: 10px;
      margin-right: 20px;
      font-size: 18px;
    }
    li:first-child {
      width: 100px;
    }
  }


  .home-product {
  background: #fff;
  margin: 20px 0 20px 0;
  display: flex;

    .cover {
      width: 240px;
      height: 610px;
      margin-right: 10px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .label {
        width: 188px;
        height: 66px;
        display: flex;
        font-size: 18px;
        color: #fff;
        line-height: 66px;
        font-weight: normal;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate3d(0, -50%, 0);

        span {
          text-align: center;

          &:first-child {
            width: 76px;
            background: rgba(0, 0, 0, 0.9);
          }

          &:last-child {
            flex: 1;
            background: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }
  }
  
  .home-store{
    min-height:1000px;
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .storeList-box{
    width: 100%;
  }

  .store-list{

    .list-item{
      background: #fff;
      // height: 234px;
      width: 100%;
      display: flex;
      margin-bottom: 20px;
      transition: all .5s;

      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }
    }

    .imgList{
      display: flex;
      
      img{
      width: 150px;
      height: 150px;
      margin-right: 10px;
    }
    }
  }

  .main{
    width: 100%;
    padding: 20px;
    // width: 864px;

    .desc{
      padding: 5px;
    }
    .store-footer{
      padding: 5px;

      color:#999

    }
  }

  .store-name{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .location{
      color:#999
    }
    p{
      margin-left: 5px;
      font-size: 24px;
    }
  }


</style>